<template>
    <div :class="className" :style="{height:height,width:width}"/>
</template>

<script>
    import * as echarts from 'echarts'

    require('echarts/theme/macarons') // echarts theme
    import resize from './mixins/resize'
    export default {
        mixins: [resize],
        props: {
            className: {
                type: String,
                default: 'chart'
            },
            width: {
                type: String,
                default: '100%'
            },
            height: {
                type: String,
                default: '280px'
            },
            autoResize: {
                type: Boolean,
                default: true
            },
            chartData: {
                type: Object,
                required: true
            }
        },
        data() {
            return {
                chart: null
            }
        },
        watch: {
            chartData: {
                deep: true,
                handler(val) {
                    this.setOptions(val)
                }
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.initChart()
            })
        },
        beforeDestroy() {
            if (!this.chart) {
                return
            }
            this.chart.dispose()
            this.chart = null
        },
        methods: {
            initChart() {
                this.chart = echarts.init(this.$el, 'macarons')
                this.setOptions(this.chartData)
            },
            setOptions(data) {
                console.log(data)
                let option = {
                    tooltip: {
                        trigger: 'item',
                        backgroundColor: '#FFFFFF',
                        formatter: '{b}: {c} ({d}%)'
                    },
                    legend: {
                        left: 'center',
                        bottom: '0',
                        data: [
                            '上传原始数据',
                            '有效数据',
                            '挂起数据'
                        ]
                    },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',

                            radius: [0, '30%'],
                            label: {
                                color: '#FFFFFF',
                                fontStyle: 'normal',
                                position: 'center',
                                fontSize: 14
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                { value: 1548, name: '上传原始数据', itemStyle: {color: '#6AAE74'} }
                            ]
                        },
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: ['45%', '70%'],
                            data: [
                                { value: 1048, name: '有效数据', itemStyle: {color: '#97C567'}},
                                { value: 335, name: '挂起数据', itemStyle: {color: '#EA994C'}}

                            ]
                        }
                    ]
                };


                this.chart.setOption(option)
                this.chart.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 1,
                    dataIndex: 1
                })

                this.chart.on('mouseover', function(e) {
                    //当检测到鼠标悬停事件，取消默认选中高亮
                    this.chart.dispatchAction({
                        type: 'downplay',
                        seriesIndex: 1,
                        dataIndex: 1
                    });
                    //高亮显示悬停的那块
                    this.chart.dispatchAction({
                        type: 'highlight',
                        seriesIndex: 1,
                        dataIndex: e.dataIndex
                    });
                });

                //检测鼠标移出后显示之前默认高亮的那块
                this.chart.on('mouseout', function(e) {
                    console.log(e)
                    this.chart.dispatchAction({
                        type: 'highlight',
                        seriesIndex: 1,
                        dataIndex: 1
                    });
                });

            }
        }
    }
</script>

